<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="./js/vue.js"></script>
    <script src="./js/vue-router.js"></script>
    <div id="app">
        <!-- 导航 -->
        <nav>
            <ul>
                <li>
                    <!-- <a href="#">首页</a> -->
                    <router-link to="/home">首页</router-link>
                </li>
                <li>
                    <router-link to="/news">新闻</router-link>
                </li>
                <li>
                    <router-link to="/hot">热门</router-link>
                </li>
            </ul>
        </nav>
        <div id="show">
            <!-- 内容展示区域(占位符) -->
            <router-view></router-view>
        </div>
    </div>
    <script>
        // 1.组件
        let Home = Vue.extend({template:"<h1>首页conter</h1>"});
        let News = {template:"<h1>新闻conter</h1>"};
        let Hot = {template:"<h1>热门conter</h1>"};
        let Login = {template:"<h1>登录页面</h1>"}

        // 2.配置页面的路径信息(多个)
        let routes = [
            {path:'/home',component:Home},
            {path:'/news',component:News,
            beforeEnter: (to, from, next) => {
                    console.log("未登录，不能访问");
                    next("/login")
                }
            },
            {path:'/hot',component:Hot},
            {path:'/login',component:Login}
        ]   

        // 创建路由对象 VueRouter
        let router = new VueRouter({
            routes
        })

        let vm = new Vue({
            el:"#app",
            // 配置路由
            router
        })
    </script>
</body>
</html>